<template>
  <div class="account-form">
    <el-form
      :model="account"
      label-width="52px"
      ref="accountForm"
      :rules="accountRules"
    >
      <el-form-item label="账号" prop="name" placeholder="账号">
        <el-input v-model="account.name" />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
        placeholder="密码"
        show-password
      >
        <el-input
          type="password"
          show-password
          v-model="account.password"
          @focus="passWordFocus"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { ElForm } from "element-plus";
import { accountRules } from "../config/index";
import cache from "@/utils/cache";

export default defineComponent({
  setup() {
    const account = reactive({
      name: "",
      password: ""
    });
    const accountForm = ref<InstanceType<typeof ElForm>>();
    const passWordFocus = () => {
      if (account.name) {
        let value = cache.getCache(account.name, true);
        account.password = value;
      }
    };
    // 提交表单
    const submitForm = (isRemember: boolean) => {
      accountForm?.value?.validate((volid) => {
        if (volid) {
          let result = false;
          if (isRemember) {
            cache.setCache(account.name, account.password, true);
          } else {
            cache.deleteCache(account.name, true);
          }
          result = true;
          result ? alert("登录成功") : alert("登录失败");
        }
      });
    };
    return { account, accountForm, accountRules, submitForm, passWordFocus };
  }
});
</script>
<style lang="less" scoped>
/deep/.el-form {
  .el-form-item__label {
    color: rgba(#000, 0.5);
  }
  .el-form-item__content {
    .el-input {
      --el-input-border-color: rgba(#000, 0.3);
    }
    .el-input__wrapper {
      background-color: rgba(#fff, 0.1);
      .el-input__inner {
        color: #000;
      }
    }
  }
}
</style>
